// common.less

// Font Size
@font-size-normal: 1em;
@font-size-small: 0.9em;

// Colors
@text-color: rgb(200, 200, 200);
@text-color-dark: rgb(150, 150, 150);
@text-color-highlight: rgb(240, 240, 240);
@text-color-detail: rgb(100, 100, 100);

@text-color-info: #6494ed;
@text-color-success: #73c990;
@text-color-warning: #e2c08d;
@text-color-error: #fd6247;

@shadow-color: rgba(0, 0, 0, 0.2);

@background-color: rgb(40, 40, 40);
@background-color-highlight: rgba(100, 200, 255, 0.2);
@background-color-lighter: #3a3e44;
@border-color: rgb(25, 25, 25);

@bufferScrollBarSize: 7px;

@component-padding: 10px;

#host, .editor, .stack {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: @background-color;
}

::-webkit-scrollbar
{
    width: 12px;
    background-color: rgb(0, 0, 0);
}

::-webkit-scrollbar-thumb
{
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: @background-color-lighter;
}

.disable-mouse {
    pointer-events: none;
}

.enable-mouse {
    pointer-events: auto;
}

/* Layer is used to force webkit to promote the element to an individual layer.
    This is used to tweak and control rendering performance, and not for layout */
.layer {
    will-change: transform;
}

.container {
    position: relative;

    &.vertical {
        display: flex;
        flex-direction: column;
    }

    &.horizontal {
        display: flex;
        flex-direction: row;
    }

    &.full {
        width: 100%;
        height: 100%;
        flex: 1 1 auto;
    }

    &.fixed {
        flex: 0 0 auto;
    }
}

.box-shadow-up-inset {
    box-shadow: 0px -4px 20px 0px rgba(0, 0, 0, 0.2) inset;
}

.box-shadow {
  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.box-shadow-up {
  box-shadow: 0 -8px 20px 0 rgba(0, 0, 0, 0.2);
}

.box-shadow-inset {
  box-shadow: inset 0 4px 8px 2px rgba(0, 0, 0, 0.2)
}

@keyframes rotate {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(360deg); }
}

.rotate-animation {
    animation-name: rotate;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
